<template>
  <div style="background-color: #eeeeee;min-height: calc(100vh - 84px);height: 100%;">
  <div class="layout-all" >
    <el-row :gutter="0">
      <el-col :xs="24" :sm="24" :lg="6">
        <h3>组件模板</h3>
        <div class="layout-scroll-user layout-scroll-userbar">
          <div class="layout-scroll-user-views">
            <!-- 可视化编辑区开始 -->
            <div v-for="(item,index) in viewData" :key="index">
              <div class="user_center" v-if="item.status == 1">
                <div class="center_menu">
                  <div class="center_title">{{item.title}}</div>
                  <div class="center_content flex_row" v-for="(ind,j) in Math.ceil(item.userCenterSataus.length/item.column)" :key="j">
                    <div class="center_item" v-for="(val,key) in item.userCenterSataus.slice(j*item.column, j*item.column+item.column)" :key="key" @click="editMenu(val)">
                      <img class="item_img" :src="val.thumb" alt="">
                      <div class="item_title">{{val.title}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 可视化编辑区结束 -->
          </div>
        </div>
    </el-col>
    <el-col :xs="24" :sm="24" :lg="18">
      <h3>编辑模板</h3>
      <div class="edit_btn">
        <el-button type="primary" icon="el-icon-plus" @click="addGroup" v-if="showForm == 1">添加分区</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="addMenu" v-if="showForm == 1">添加菜单</el-button>
      </div>
      <div class="" v-if="showForm == 1">
        <user-center-tree :tableData="tableData" @editMenu="editMenu" @delMenu="delMenu" @getShowMenu="getShowMenu"/>

      </div>
      <user-center-form ref="userCenterForm" v-if="showForm == 2" @closeAddMenu="close" ></user-center-form>
      <user-group-form ref="userGroupForm" v-if="showForm == 3"  @closeGroupForm ="close" ></user-group-form>
    </el-col>
    </el-row>
  </div>
  </div>
</template>
<script>
// import $ from 'jquery'
import userCenterForm from './components/user_form.vue'
import userGroupForm from './components/group_form.vue'
import UserCenterTree from './components/UserCenterTree.vue'
export default {
  name:'index_ui_user',
  components: {
    userCenterForm,
    UserCenterTree,
    userGroupForm
  },
  data() {
    return {
      //1列表 2菜单编辑 3分区编辑
      showForm : 1,

      tableData:[],
      //可视区数据
      viewData:[],
    }
  },
  mounted() {
    this.init()
    this.getShowMenu()
  },
  methods: {
    //编辑菜单和分区
    editMenu (item) {
      if (item.cat_id) {
        //编辑菜单
        this.showForm = 2
        this.$nextTick(function () {
          this.$refs['userCenterForm'].init(item.id)
        })
      } else {
        //编辑分区
        this.showForm = 3
        this.$nextTick(function () {
          this.$refs['userGroupForm'].init(item.id)
        })
      }
    },
    //添加分区
    addGroup () {
      this.showForm = 3
      this.$nextTick(function () {
        this.$refs['userGroupForm'].init()
      })
    },
    //添加菜单
    addMenu () {
      this.showForm = 2
      this.$nextTick(function () {
        this.$refs['userCenterForm'].init()
      })
    },
    //删除菜单和分区
    delMenu (item) {
      //删除分区
      var url = "/admin/UserCenterCat/del?id=" + item.id
      //删除菜单
      if (item.cat_id) {
        url = "/admin/UserCenter/del?id=" + item.id
      }
       this.$msg_confirm().then((e) => {
        if (e) {
          this.get(url, {}, "POST").then((e) => {
              this.init();
            }
          );
        }
      });
    },
    close(type=0){
      if(type==0){
        this.init()
        this.getShowMenu()
      }else{
        this.showForm = 1
      }
      
    },
    //获取全部菜单数据
    init () {
      this.showForm = 1
      this.get('/admin/UserCenter/structure', {}, 'POST').then(e => {
        this.tableData = e.list
      })
    },
    //获取启用菜单数据
    getShowMenu () {
      this.showForm = 1
      this.get('/admin/UserCenter/structure', {status:1}, 'POST').then(e => {
        console.log(e)
        this.viewData = e.list
        for(let i in this.viewData){
						let row=this.viewData[i].userCenterSataus.length
						if(row%3==0)this.viewData[i].column=3
						else if(row%5==0)this.viewData[i].column=5
            else this.viewData[i].column=4
        }
      })
    },
  }
}
</script>

<style scoped>
.layout-scroll-user {
    width: 350px;
    /* height: 567px; */
    padding-right: 24px;
    padding-left: 2px;
    overflow-x: hidden;
    overflow-y: auto;
}
.layout-scroll-user-right {
    width: 100%;
    height: 670px;
    padding-right: 24px;
    padding-left: 2px;
    overflow-x: hidden;
    overflow-y: auto;
}
.layout-scroll-user-views {
  text-align:center;
    width: 325px;
    /* min-height: 667px; */
    height: auto;
    padding-bottom: 40px;
    padding-top: 2px;
    background-color: #fff;
}
.layout-scroll-userbar::-webkit-scrollbar {
    width: 8px;
}
.layout-scroll-userbar::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #999;
}
.layout-scroll-userbar::-webkit-scrollbar-track {
    background-color: #ddd;
    box-shadow:inset 0 0 2px #333;
    -webkit-box-shadow: inset 0 0 2px #333;
    border-radius: 4px;
}
.img-box {
  position: relative;
  width:100%
}
.img-box-half {
  display: inline-block;
  position: relative;
  width:48%
}
.mask {
 background-color: rgb(0, 0, 0);
 opacity: 0.5;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
 text-align:center;
 color:#ffffff;
}
.mask::before{
    display: inline-block;
    content: "";
    height: 100%;
    vertical-align: middle;
}

.layout-all {
  margin: 10px;
}

.tpl-img {
  /* position:absolute; */
  width:100%;
}

/* 可视化区开始 */
.flex_row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.user_center {
  /* padding:10px; */
  margin-top:15px;
}
.center_menu {
  text-align: left;
  /* border:1px solid #f0f0f0; */
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  border-radius:10px;
  width:310px;
  margin-left:auto;
  margin-right:auto;
}
.center_title {
  /* height:20px; */
  border-bottom:1px solid #f0f0f0;
  padding:5px 0px 5px 15px;
}
.center_content {
  padding:5px;
  justify-content: space-around;
  font-size: 12px;
}
.center_item {
    /* width:50px; */
     flex: 1;
    text-align: center;
   
}
.item_img {
  width:45px;
  height:45px;
}
/* 可视化区结束 */

/* 编辑区开始 */
.edit_btn {
  margin-bottom:10px;
}
.flex_row_between {
  display: flex;
  align-items: center;
  justify-content: space-between;

}
.tree_left {
  justify-content: flex-start;
}
.layout-all {
  margin-top: 20px;
  margin-left: 10px;
}
.layout-content {
  margin-top: 20px;
}

.custom-tree-node {
  padding-right:200px;
  width:100%;
}
.tree_item {
  font-size:14px;
  width:200px;
  justify-content: flex-start;
}
.item_discription {
  color:#000;
  font-size:12px;
  margin-right:10px;
}
.input_item {
  width:150px;
}
/* 编辑区结束 */
</style>
